<template>
  <div class="main">
    <div class="topTitle">发文回收</div>
    <div class="form_content">
      <NScrollbar>
        <NSpin :show="spinShow">
          <div class="content">

            <div class="progressHint" v-if="hint">
              <NIcon size="20" class="iconStyle">
                <ErrorRound />
              </NIcon>
              <div style="white-space: pre-wrap" v-html="hint"></div>
            </div>
            <div class="progress">
              <div style="display:flex; margin-right: 10rem;">
                <NIcon :size="20" class="iconStyle">
                  <ApprovalFilled />
                </NIcon>
                <span>审批流程</span>
              </div>
              <span style="font-size: 18rem;flex: 1;" :style="{ color: !workFlowList ? 'red' : '#79bb92' }">
                {{ workFlowList ? workFlowList : '暂无配置流程，请联系管理员进行配置' }}
              </span>
            </div>

            <div class="content_cen">
              <NForm require-mark-placement="left" label-placement="left" :label-width="110" :model="formValue"
                style="width: 350rem" label-align="right" :rules="rules" ref="formRef">

                <NSpace justify="center">
                  <NFormItem label="标题:">
                    <NInput placeholder="请输入标题" class="commonWidth" type="text" v-model:value="formValue.description"
                      clearable disabled />
                  </NFormItem>

                  <NFormItem label="说明:">
                    <NInput placeholder="请输入说明" class="commonWidth" type="textarea" style="min-height: 130rem"
                      v-model:value="formValue.remark" clearable disabled />
                  </NFormItem>

                  <NFormItem label="回收理由:" path="retractedReason">
                    <NInput placeholder="请输入回收理由" class="commonWidth" type="textarea" style="min-height: 130rem"
                      v-model:value="formValue.retractedReason" clearable :allow-input="noSideSpace" />
                  </NFormItem>

                  <NFormItem label="查看原发文:">
                    <div class="commonWidth">
                      <NButton ghost type="primary" style="width: 115px" @click="
                        $router.push({
                          path: '/OA/ReceiveOrDispatch/DispatchInfo',
                          query: { id: dispatchInfo.id }
                        })
                        ">
                        点击跳转
                      </NButton>
                    </div>
                  </NFormItem>
                </NSpace>
              </NForm>
            </div>
          </div>
        </NSpin>
      </NScrollbar>
    </div>
  </div>
  <FixedAction>
    <div style="display: flex">
      <NSpace justify="start" style="flex: 0 0 42%">
        <NButton style="width: 78px; color: #5fb17f" ghost @click="goBack">
          <template #icon>
            <img :src="VBackImg" style="width: 25rem; height: 25rem" />
          </template>
          返回
        </NButton>
      </NSpace>

      <NSpace justify="center">
        <NButton type="primary" @click="confirm(false)" :loading="loading" v-if="workFlowList">
          提交申请
        </NButton>
      </NSpace>
    </div>
  </FixedAction>

  <NModal :auto-focus="false" v-model:show="contentVisible" @close="contentVisible = false">
    <VDialogContent @close="contentVisible = false" @submit="submit" title="回收提示">
      <div style="width: 300rem; height: 100rem; text-align: center; line-height: 100rem">
        {{ contentContent }}
      </div>
    </VDialogContent>
  </NModal>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import {
  NSpace,
  NForm,
  NInput,
  NFormItem,
  NButton,
  NScrollbar,
  NSpin,
  useMessage,
  NModal,
  type FormInst,
  NIcon
} from 'naive-ui'
import router from '@/router'
import { onMounted, watch } from 'vue'
import { useTagStore } from '@/stores/layout'
import FixedAction from '@/components/FixedAction.vue'
import { sendRequest } from '@/utils/api'
import type { HttpResponse } from '@/utils/http'
import type { DisModel } from '@/api/receiveOrDispatch'
import { useRoute } from 'vue-router'
import VDialogContent from '@/views/OA/Common/DialogContent.vue'
import VBackImg from '@/assets/images/back.png'
import { ApprovalFilled } from '@vicons/material'
import { ErrorRound } from '@vicons/material'

const tags = useTagStore().tags
const route = useRoute()
const message = useMessage()
const formValue = reactive<Record<string, any>>({
  retractedReason: null
})

const rules = {
  retractedReason: {
    required: true,
    trigger: ['input', 'change'],
    validator: (_: any, value: any) => {
      if (!value) return new Error('请输入回收理由')
      if (value?.length > 100) return new Error('回收理由字数不得超过100')
      return true
    }
  }
}
// 限制前后空格
const noSideSpace = (value: string) => !value.startsWith(' ') && !value.endsWith(' ')
// 获取流程id
const hint = ref()
const workFlowList = ref(' ')
const getWorkFlow = async () => {
  const [error, res] = await sendRequest<HttpResponse<DisModel>>({
    module: 'receiveOrDispatch',
    api: 'workFlow',
    override: {
      params: {
        functionCode: 'A0544'
      }
    }
  })
  if (error) return
  if (res.code !== 0) return
  hint.value = res.data.remark
  workFlowList.value = res.data.workFlowList?.length ? res.data.workFlowList?.map((it: any) => it).join(' → ') : null
}
// 获取详情
const spinShow = ref(false)
const dispatchInfo = ref<any>({})
const getDispatchInfo = async () => {
  spinShow.value = true
  const [error, res] = await sendRequest<HttpResponse<DisModel>>({
    module: 'receiveOrDispatch',
    api: 'dispatchInfo',
    uri: {
      id: route.query.id as never
    }
  })
  if (error) return
  if (res.code !== 0) return
  dispatchInfo.value = res.data
  formValue.description = dispatchInfo.value.description
  formValue.remark = dispatchInfo.value.remark
  spinShow.value = false
}
// 返回
const goBack = () => {
  const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)
  tags.splice(index, 1)
  if (tags.length == 0) {
    router.push({ path: '/OA/Workbench/UserDesktop' })
  } else history.back()
}
// 确定
const isDraft = ref()
const formRef = ref<FormInst | null>(null)
const contentContent = ref()
const confirm = async (falt: any) => {
  formRef.value?.validate(async (err) => {
    if (err) return
    contentVisible.value = true
    contentContent.value = falt ? '您确定要保存草稿吗？' : ' 您确定要提交申请吗？'
    isDraft.value = falt
  })
}
// 提交
const loading = ref(false)
const contentVisible = ref(false)
const submit = async () => {
  contentVisible.value = false
  loading.value = true
  const [error, res] = await sendRequest<HttpResponse<DisModel>>({
    module: 'receiveOrDispatch',
    api: 'dispatchRecyle',
    override: {
      data: {
        issueId: route.query.id as never,
        isDraft: isDraft.value,
        retractedReason: formValue.retractedReason
      }
    }
  })
  loading.value = false
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error(res.msg)
  message.success('发文回收成功')
  goBack()
}
watch(
  () => route,
  () => {
    if (route.path == '/OA/ReceiveOrDispatch/DispatchRecyle' && route.query.id) getDispatchInfo()
  },
  { deep: true, immediate: true }
)
onMounted(async () => {
  getWorkFlow()
})
</script>

<style scoped lang="scss">
@mixin CommonFont {
  font-size: 16rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}

.commonWidth {
  width: 240rem;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .topTitle {
    width: 100%;
    border-bottom: 1px solid #fff;
    padding: 15rem 20rem;
    margin-bottom: 20rem;
    @include CommonFont;
  }

  .form_content {
    width: 100%;
    height: 100%;
    padding: 0 20rem 0rem;

    .content {
      display: flex;
      flex-wrap: wrap;
      padding: 20rem 0 180rem;
      background-color: #ebeceb;

      .scope {
        display: flex;
        flex-wrap: wrap;
        width: 100%;

        .userBox {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 40rem;
          background-color: #fff;
          border-radius: 4rem;
          padding: 5px 10rem;
          margin-bottom: 10rem;
        }
      }
    }
  }
}

.content_cen {
  display: flex;
  flex-direction: column;
  margin-left: 35%;
}

.iconStyle {
  margin-right: 5rem;
  color: #5fb17f;
}

.progress {
  display: flex;
  align-items: center;
  min-width: 350rem;
  max-width: 800rem;
  min-height: 50rem;
  background-color: #d5e2d8;
  border-radius: 5rem;
  margin-bottom: 10px;
  padding: 5px 15px;
  margin-left: 35%;
}

.progressHint {
  display: flex;
  min-width: 350rem;
  max-width: 800rem;
  padding: 5px 15px;
  margin-left: 35%;
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}
</style>
